<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 引入 layui.css -->
  <link href="//unpkg.com/layui@2.11.2/dist/css/layui.css" rel="stylesheet">
  <script src="../jquery-3.7.1.min.js"></script>
</head>

<body>
  <div class="layui-layout layui-layout-admin">
    <div class="layui-header">
      <div class="layui-logo layui-hide-xs layui-bg-black">后台管理系统</div>
      <!-- 头部区域（可配合layui 已有的水平导航） -->
      <ul class="layui-nav layui-layout-left">
        <!-- 移动端显示 -->
        <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
          <i class="layui-icon layui-icon-spread-left"></i>
        </li>
        <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 1</a></li>
        <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2</a></li>
        <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li>
        <li class="layui-nav-item">

        </li>
      </ul>
      <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
          <a href="javascript:;">
            <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
            tester
          </a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">Your Profile</a></dd>
            <dd><a href="javascript:;">Settings</a></dd>
            <dd><a href="javascript:;">Sign out</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
          <a href="javascript:;">
            <i class="layui-icon layui-icon-more-vertical"></i>
          </a>
        </li>
      </ul>
    </div>
    <div class="layui-side layui-bg-black">
      <div class="layui-side-scroll">
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree" lay-filter="test">

          <li class="layui-nav-item"><a href="javascript:;">商品管理</a></li>
          <li class="layui-nav-item"><a href="javascript:;">个人中心</a></li>
        </ul>
      </div>
    </div>
    <div class="layui-body">
      <div style="padding: 15px;">
        <blockquote class="layui-elem-quote layui-text">
          <span class="layui-breadcrumb" lay-separator=">">
            <a href="">
              <i class="layui-icon layui-icon-spread-left"></i>&emsp;首页</a>
            <a href="">商品列表</a>
          </span>
        </blockquote>
        <div class="layui-card layui-panel">
          <div class="layui-card-header" style="height:80px">
            <div class="addbox">
              <form action="#" id="addForm" class="concent">
                &emsp;<span>商品名称:</span><input type="text" name="goods_name">
                &emsp;<span>库&emsp;&emsp;存:</span><input type="text" name="stock">
                &emsp;<span>价&emsp;&emsp;格:</span><input type="text" name="price">
                &emsp;<span>状&emsp;&emsp;态:</span><input type="text" name="status">
                &emsp;<span>售&emsp;&emsp;出:</span><input type="text" name="sold">
                &emsp;<span>图&emsp;&emsp;片:</span><input type="text" name="img">
                <button type="button" onclick="toggleAddForm()">添加</button>
                <button type="button" onclick="addbtntwo()">确认添加</button>
                <button type="button" onclick="mod_stu()">修改商品状态</button>
              </form>
              <form action="#" id="searchForm">
                <input type="text" class="search_inp">&nbsp;
                <button type="button" onclick="seabtn()">搜索</button>
                <button type="button" class="addbtn">添加</button>
              </form>
            </div>
          </div>
          <div class="layui-card-body">
            <table class="layui-hide" lay-filter="test" id="ID-table-demo-data">
              <thead></thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
        <br><br>
      </div>
    </div>
  </div>
  <br><br>
  </div>
  </div>
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    底部固定区域
  </div>
  </div>

  <!-- 引入 layui.js -->
  <script src="//unpkg.com/layui@2.11.2/dist/layui.js"></script>
  <script>
    //JS 
    layui.use(['element', 'layer', 'util'], function () {
      var element = layui.element;
      var layer = layui.layer;
      var util = layui.util;
      var $ = layui.$;

      //头部事件
      util.event('lay-header-event', {
        menuLeft: function (othis) { // 左侧菜单事件
          layer.msg('展开左侧菜单的操作', { icon: 0 });
        },
        menuRight: function () {  // 右侧菜单事件
          layer.open({
            type: 1,
            title: '更多',
            content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
            area: ['260px', '100%'],
            offset: 'rt', // 右上角
            anim: 'slideLeft', // 从右侧抽屉滑出
            shadeClose: true,
            scrollbar: false
          });
        }
      });
    });
  // 全部商品列表
    function rendertab() {
    layui.use('table', function () {
      var table = layui.table;
      var $ = layui.$;
      var layer = layui.layer;
      var inst = table.render({
        elem: '#ID-table-demo-data',
        cellMinWidth: 80,
        cols: [[ //标题栏
          { field: 'id', title: 'ID', sort: true },
          { field: 'goods_name', title: '名称', width: 100 },
          { field: 'stock', title: '库存', sort: true },
          { field: 'price', title: '价格 ', width: 100, sort: true },
          { field: 'status', title: '状况' },
          { field: 'sold', title: '已售' },
          { field: 'img', title: '图片', width: 100, },
          { field: 'created_at', title: '创建时间', width: 140, sort: true },
          { field: 'updated_at', title: '更新时间', width: 140, sort: true },
          { title: '操作', width: 300, templet: "#toolEventDemo" },
        ]],
        skin: "line",
        page: true,
        limits: [5, 10, 15],
        limit: 5,
      })
      $.ajax({
        type: "get",
        url: "https://liu.zzgoodqc.cn/goodsx/goodslist",
        dataType: "json",
        success: (a) => {
          inst.reload({
            data: a.data
          })
          //   $("thead tr").append(`
          //     <th>操作</th>
          // `)
          //   $("tbody tr").append(`
          //   <td>
          //     <button style="width:50px;height:30px">删除</button>&nbsp;
          //     <button style="width:50px;height:30px">修改</button>&nbsp;
          //     <button style="width:50px;height:30px" index='id'>详情</button>
          //   </td>
          // `)
        },
        error: (jqXHR) => {
          console.log(jqXHR);
        }
      })
    })
  }
  rendertab()
  //添加商品
  function addbtntwo() {
    $.ajax({
      type: "post",
      url: "https://liu.zzgoodqc.cn/goodsx/add",
      dataType: "json",
      data: {
        goods_name: $('input[name="goods_name"]').val(),
        stock: $('input[name="stock"]').val(),
        price: $('input[name="price"]').val(),
        status: $('input[name="status"]').val(),
        sold: $('input[name="sold"]').val(),
        img: $('input[name="img"]').val(),
      },
      success: function(response) {
        // 清空表单
        $('#addForm')[0].reset();
        // 刷新表格
        rendertab();
        // 显示成功消息
        layui.layer.msg('添加成功', {icon: 1});
      },
      // error: function(jqXHR) {
      //   console.log(jqXHR);
      //   layui.layer.msg('添加失败', {icon: 2});
      // }
    })
  }
  // 显示/隐藏添加表单的函数
  function toggleAddForm() {
    $(".concent").toggle();
  }
  //删除
  function del(a) {
    a = (event.target.parentNode.parentNode.parentNode.firstChild.innerText)
    $.ajax({
      url: "https://liu.zzgoodqc.cn/goodsx/delete",
      type: "get",
      dataType: "json",
      data: {
        id: a,
      },
      success: function (data) {
        console.log(data);
        rendertab()
      },
      error: function (jqXHR) {
        console.log("Error: " + jqXHR.status);
      }
    })
  }
  </script>
  <script type="text/html" id="toolEventDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn  layui-btn-xs" lay-event="look">查看详情</a>
  </script>
</body>

</html>